<template>
	<view class="addr-iframe">
		<block class="addr-tree" v-for="(item,index) in items.filter(it=>it.ParentID==0)" :key="index">
			<view class="addr-list-orgname">
				<image v-show="item.ID==1" src="@/static/images/icons/icon-09.png" mode="widthFix"></image>
				<view class="orgname">{{item.Name}}</view>
			</view>
			<view class="addr-list-parent" v-for="(_item,_index) in arrParent" :key="_index">
				<view class="addr-list-parent-name" @click="onToggle(_index)">
					<view class="flag"></view>
					<view :class="[_item.Type?'open':'close']"></view>
					<view class="name">{{_item.Name}}</view>
				</view>
				<view v-show="_item.Type" class="addr-list-child" v-for="(__item,__index) in items.filter(it=>it.ParentID==_item.ID)"
				 :key="__index">
					<view class="addr-list-child-name" @click="onNav(__item)">
						<view :class="[__index==0?'flagtop':'flag']"></view>
						<view class="rect"></view>
						<view>{{__item.Name}}</view>
					</view>
				</view>
			</view>
		</block>
		<view class="addr-list-orgname" v-show="items.length==0">
			{{tip}}
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				items: [],
				arrParent: [],
				tip: "数据正在加载中..."
			}
		},
		onLoad: function() {
			this.getAddrList();
		},
		methods: {
			createParent() {
				this.items.filter(it => it.ParentID == 0).forEach(item => {
					this.items.filter(it => it.ParentID == item.ID).forEach(_item => {
						this.arrParent.push(_item);
					})
				})
			},
			onToggle(index) {
				this.arrParent[index].Type = !this.arrParent[index].Type;
			},
			onNav(item) {
				uni.setStorageSync("selectedUser", JSON.stringify(item))
				uni.navigateTo({
					url: './AddrUser'
				})
			},
			getAddrList() {
				let apiData = {
					url: pageApp.globalData.url + "/GetTreeList?TreeType=Org",
					data: {
						"page": 1,
						"rows": 20
					},
					success: (d) => {
						// console.log("数据", d.data.data.items);
						this.items = d.data.data.items;
						this.createParent();
					}
				}
				// 发送数据
				this.vjAjaxData(apiData);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.addr-iframe {
		margin: 20rpx 0;
		padding: 20rpx 0;
		background-color: #ffffff;
	}

	.addr-list-orgname {
		padding: 20rpx 30rpx 0 30rpx;
		margin-top: 2rpx;
		display: flex;
	}

	.addr-list-orgname image {
		width: 32rpx;
		margin-right: 16rpx;
		margin-top: 6rpx;
	}

	.addr-list-parent {
		border-left: solid 4rpx #EBEBEB;
		padding: 28rpx 0;
		margin-left: 46rpx;
	}

	.addr-list-parent-name {
		background-color: #ffffff;
		padding: 0 60rpx;
		display: flex;
	}

	.addr-list-parent-name .flag {
		width: 44rpx;
		height: 4rpx;
		margin-left: -60rpx;
		margin-top: 20rpx;
		border-bottom: solid 4rpx #EBEBEB;
	}

	.addr-list-parent-name .open {
		margin-top: 2rpx;
		margin-right: 16rpx;
		width: 0;
		height: 0;
		border: solid 16rpx #17ba82;
		border-left-color: transparent;
		border-right-color: transparent;
		border-top-color: transparent;
	}

	.addr-list-parent-name .close {
		margin-top: 16rpx;
		margin-right: 16rpx;
		width: 0;
		height: 0;
		border: solid 16rpx #17ba82;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	.addr-list-child {
		border-bottom: solid 2rpx #F1F5F6;
		padding: 28rpx 36rpx;
		margin-left: 126rpx;
	}

	.addr-list-child-name {
		background-color: #ffffff;
		padding: 0 46rpx;
		display: flex;
	}

	.addr-list-child-name .flag {
		width: 30rpx;
		height: 106rpx;
		margin-top: -80rpx;
		margin-left: -150rpx;
		border: solid 4rpx #EBEBEB;
		border-right: none;
		border-top: none;
	}

	.addr-list-child-name .flagtop {
		width: 30rpx;
		height: 64rpx;
		margin-top: -38rpx;
		margin-left: -150rpx;
		border: solid 4rpx #EBEBEB;
		border-right: none;
		border-top: none;
	}

	.addr-list-child-name .rect {
		width: 20rpx;
		height: 20rpx;
		border: solid 4rpx #17ba82;
		border-radius: 50%;
		margin-top: 18rpx;
		margin-right: 16rpx;
	}
</style>
